<script setup>
//  按需引入 echarts
import * as echarts from "echarts";
import { reactive } from "vue";

const dom = ref(); // 使用ref创建虚拟DOM引用，使用时用main.value

// 指定图表的配置项和数据
const option = reactive({
	tooltip: {
		trigger: "item",
	},
	legend: {
		top: "5%",
		left: "center",
	},
	series: [
		{
			name: "Access From",
			type: "pie",
			radius: ["40%", "70%"],
			avoidLabelOverlap: false,
			itemStyle: {
				borderRadius: 10,
				borderColor: "#fff",
				borderWidth: 2,
			},
			label: {
				show: false,
				position: "center",
			},
			emphasis: {
				label: {
					show: true,
					fontSize: 40,
					fontWeight: "bold",
				},
			},
			labelLine: {
				show: false,
			},
			data: [
				{ value: 1048, name: "Search Engine" },
				{ value: 735, name: "Direct" },
				{ value: 580, name: "Email" },
				{ value: 484, name: "Union Ads" },
				{ value: 300, name: "Video Ads" },
			],
		},
	],
});

onMounted(() => {
	var myChart = echarts.init(dom.value);
	myChart.setOption(option);
	window.addEventListener("resize", () => {
		myChart.resize();
	});
});
</script>

<template>
	<div ref="dom" style="width: 100%; height: 70%"></div>
</template>
